import React, { useState } from 'react';
import { Tabs } from 'antd';
import ScanLogTable from './components/ScanLogTable';
import ReportRecordTable from './components/ReportRecordTable';
import DeployLogTable from './components/DeployLogTable';
import AnaTaskTable from './components/AnaTaskTable';
import './index.less';

const { TabPane } = Tabs;

/**
 * SA扫描管理主页面
 * 包含4个Tab页签：扫描日志、扫描记录、部署日志、分析任务
 */
const ScanManagement: React.FC = () => {
    const [activeTab, setActiveTab] = useState<string>('scanLog');
    const [filterUnitId, setFilterUnitId] = useState<string>('');

    /**
     * 处理Tab切换
     */
    const handleTabChange = (key: string) => {
        setActiveTab(key);
        // 切换Tab时清除筛选条件
        setFilterUnitId('');
    };

    /**
     * 处理单元ID关联跳转
     * @param unitId 单元ID
     * @param targetTab 目标Tab
     */
    const handleUnitIdClick = (unitId: string, targetTab: string) => {
        setFilterUnitId(unitId);
        setActiveTab(targetTab);
    };

    return (
        <div className="scan-management" style={{ padding: 24 }}>
            {/* Inline padding ensures spacing regardless of CSS order */}
            <div className="scan-management-header" style={{ padding: '20px 24px' }}>
                <h2>SA扫描管理</h2>
            </div>
            <div className="scan-management-content" style={{ padding: 24 }}>
                <Tabs activeKey={activeTab} onChange={handleTabChange}>
                    <TabPane tab="扫描日志" key="scanLog">
                        <ScanLogTable
                            filterUnitId={activeTab === 'scanLog' ? filterUnitId : ''}
                            onUnitIdClick={(unitId) => handleUnitIdClick(unitId, 'anaTask')}
                        />
                    </TabPane>
                    <TabPane tab="扫描记录" key="reportRecord">
                        <ReportRecordTable
                            filterUnitId={activeTab === 'reportRecord' ? filterUnitId : ''}
                            onUnitIdClick={(unitId) => handleUnitIdClick(unitId, 'anaTask')}
                        />
                    </TabPane>
                    <TabPane tab="部署日志" key="deployLog">
                        <DeployLogTable
                            filterUnitId={activeTab === 'deployLog' ? filterUnitId : ''}
                            onUnitIdClick={(unitId) => handleUnitIdClick(unitId, 'scanLog')}
                        />
                    </TabPane>
                    <TabPane tab="分析任务" key="anaTask">
                        <AnaTaskTable
                            defaultUnitId={activeTab === 'anaTask' ? filterUnitId : ''}
                            onUnitIdClick={(unitId) => handleUnitIdClick(unitId, 'reportRecord')}
                        />
                    </TabPane>
                </Tabs>
            </div>
        </div>
    );
};

export default ScanManagement;
